<template>
  <div class="OralReport_bg">
    <div class="OralReport">
      <div class="OralReport_content">
        <!-- 标题部分 -->
        <div class="OralReport_title">
          <span>{{ $t('orthodonticReport.title') }}</span>
        </div>
        <!-- 信息盒子部分 -->
        <div class="OralReport_info bd">
          <el-row>
            <el-col :offset="1" :span="7">
              <span class="title_text">{{ $t('oralReport.oralReport_name') }}:</span>
              <span>{{ infoData.name }}</span>
            </el-col>
            <el-col :span="8">
              <span class="title_text">{{ $t('oralReport.oralReport_sex') }}:</span>
              <span>{{
                infoData.sex === '0' ? $t('oralReport.sex1') : $t('oralReport.sex2')
              }}</span>
            </el-col>
            <el-col :span="8">
              <span class="title_text">{{ $t('oralReport.oralReport_clinic') }}:</span>
              <span>{{ infoData.clinic }}</span>
            </el-col>
            <el-col :offset="1" :span="7">
              <span class="title_text">{{ $t('oralReport.oralReport_date') }}:</span>
              <span>{{ infoData.date }}</span>
            </el-col>
          </el-row>
        </div>

        <!-- 三维模型部分 -->
        <div class="OralReport_model">
          <el-card class="OralReport_subtitle">
            {{ $t('oralReport.oralReport_model') }}
          </el-card>

          <div class="OralReport_model_box bd">
            <div class="btn_box">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('oralScan.oralScan_100')"
                placement="right"
              >
                <img
                  @click="switchView('1')"
                  :class="{ themeBg: viewType === '1' }"
                  src="@/assets/img/icon/occlu.png"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('oralScan.oralScan_26')"
                placement="right"
              >
                <img
                  @click="switchView('2')"
                  :class="{ themeBg: viewType === '2' }"
                  src="@/assets/img/icon/upper.png"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('oralScan.oralScan_30')"
                placement="right"
              >
                <img
                  @click="switchView('3')"
                  :class="{ themeBg: viewType === '3' }"
                  src="@/assets/img/icon/lower.png"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('orthodonticReport.orthodonticReport_4')"
                placement="right"
              >
                <img
                  @click="switchView('4')"
                  :class="{ themeBg: viewType === '4' }"
                  src="@/assets/img/icon/occlu_fill.png"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('orthodonticReport.orthodonticReport_5')"
                placement="right"
              >
                <img
                  @click="switchView('5')"
                  :class="{ themeBg: viewType === '5' }"
                  src="@/assets/img/icon/upper_fill.png"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('orthodonticReport.orthodonticReport_6')"
                placement="right"
              >
                <img
                  @click="switchView('6')"
                  :class="{ themeBg: viewType === '6' }"
                  src="@/assets/img/icon/lower_fill.png"
                  alt=""
                />
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('orthodonticReport.orthodonticReport_7')"
                placement="right"
              >
                <img
                  @click="switchView('7')"
                  :class="{ themeBg: viewType === '7' }"
                  src="@/assets/img/icon/left.png"
                  alt=""
                />
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('orthodonticReport.orthodonticReport_8')"
                placement="right"
              >
                <img
                  @click="switchView('8')"
                  :class="{ themeBg: viewType === '8' }"
                  src="@/assets/img/icon/right.png"
                  alt=""
                />
              </el-tooltip>
            </div>
            <div class="model_box">
              <div>
                <threeLoad
                  style="width: 50%"
                  v-if="threeFileBefore && threeFileBefore.length > 0"
                  dom-name="container1"
                  ref="threeLoad"
                  :fileList="threeFileBefore"
                  :model-title="$t('orthodonticReport.orthodonticReport_1')"
                  @syncChange="setTarget('1')"
                />

                <div class="divider"></div>
                <threeLoad
                  style="width: 50%"
                  v-if="threeFileAfter && threeFileAfter.length > 0"
                  ref="threeLoad1"
                  dom-name="container2"
                  :fileList="threeFileAfter"
                  :model-title="$t('orthodonticReport.orthodonticReport_2')"
                  @syncChange="setTarget('2')"
                />
              </div>

              <span
                :class="['resetting_box', { resetting_box_pc: deviceType === 'pc' }]"
                @click="toResetting"
              >
                <img src="./../../assets/img/icon/flush.png" alt="" />
              </span>
            </div>
          </div>
        </div>

        <!-- 模型截图部分 -->
        <div class="OralReport_screenshot">
          <el-card class="OralReport_subtitle">
            {{ $t('orthodonticReport.modelImage') }}
          </el-card>
          <div class="OralReport_screenshot_box bd">
            <div
              class="OralReport_screenshot_box_top"
              :style="[
                {
                  'min-height': deviceType === 'pc' ? '100px' : '300px',
                },
              ]"
            >
              <div class="screenshot_box">
                <img :src="infoData.dental" alt="" />
              </div>
              <div class="carousel_box">
                <!-- 矫正前 -->
                <div>
                  <h3>{{ $t('orthodonticReport.orthodonticReport_1') }}</h3>
                  <div class="pic_box">
                    <div>
                      <img :src="infoData.leftBefore" alt="" />
                    </div>
                    <div>
                      <img :src="infoData.occluBefore" alt="" />
                    </div>
                    <div>
                      <img :src="infoData.rightBefore" alt="" />
                    </div>
                  </div>
                </div>
                <!-- 矫正后 -->
                <div>
                  <h3>{{ $t('orthodonticReport.orthodonticReport_2') }}</h3>
                  <div class="pic_box">
                    <div>
                      <img :src="infoData.leftAfter" alt="" />
                    </div>
                    <div>
                      <img :src="infoData.occluAfter" alt="" />
                    </div>
                    <div>
                      <img :src="infoData.rightAfter" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 矫正动画部分 -->
        <div class="OralReport_problem">
          <el-card class="OralReport_subtitle">
            {{ $t('orthodonticReport.orthodonticReport_3') }}
          </el-card>

          <div class="OralReport_problem_box">
            <video controls autoplay v-if="infoData.animation">
              <source :src="infoData.animation" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="$t('add.add29')"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div v-loading="downloadLoading" :element-loading-text="$t('add.add068')">
        <p style="text-align: center">{{ $t('add.add077') }}</p>
      </div>
      <span v-show="!downloadLoading" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t('add.add31') }}
        </el-button>
        <el-button type="primary" @click="regenerateFile()">
          {{ $t('add.add067') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as THREE from 'three';
import threeLoad from '@/components/three/modelSync';

export default {
  name: 'OralReport',

  data() {
    return {
      reportId: this.$route.query.orthodonticReportId,
      lang: this.$route.query.lang ? this.$route.query.lang : 'cn',
      /***
       * 3d文件部分
       */
      // 3d文件
      threeFile: [],
      //
      threeFileBefore: [],
      threeFileAfter: [],

      // 存储上一次点击的viewType

      viewType: '1',

      // 所有的数据
      infoData: {},
      // 牙位图信息
      toothPositionPic: '',
      // 截图数据
      ModelScreenshot: [],

      // 确定是移动端还是pc端
      deviceType: 'pc',

      dialogVisible: false,
      downloadLoading: false,
      // 记录当前变化的是哪个模型
      changeModeType: '1',
    };
  },
  components: {
    threeLoad,
  },

  created() {
    this.setLangue();
    // 请求页面数据
    this.getData();
  },
  watch: {
    $route() {
      if (this.$route.query.lang) {
        this.lang = this.$route.query.lang;
        this.setLangue();
      }
    },
  },

  mounted() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
    );
    if (flag) {
      // 移动端

      this.deviceType = 'phone';
    } else {
      // pc端
      this.deviceType = 'pc';
    }
  },
  methods: {
    setLangue() {
      localStorage.setItem('lang', this.lang);

      this.$i18n.locale = this.lang;
    },
    getData() {
      this.$http
        .get(
          `/orthodonticsimulationreport/showOrthodonticReportInformation?reportId=${this.reportId}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.infoData = res.data[0];
            console.log('res---', res);

            // this.infoData = res.data.Info[0];
            // if (this.infoData.markStatus === -1) {
            //   this.dialogVisible = true;
            //   return false;
            // }
            this.threeFileBefore = [
              {
                url: this.infoData.afterUpper,
                typeName: 'upper.obj',
              },
              {
                url: this.infoData.beforeLower,
                typeName: 'lower.obj',
              },
            ];
            this.threeFileAfter = [
              {
                url: this.infoData.afterUpper,
                typeName: 'upper.obj',
              },
              {
                url: this.infoData.afterLower,
                typeName: 'lower.obj',
              },
            ];
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    setTarget(type) {
      this.changeModeType = type;
      this.syncModelChange(this.changeModeType);
    },
    // 同步模型的旋转
    syncModelChange(type) {
      let threeLoad = this.$refs.threeLoad;
      let threeLoad1 = this.$refs.threeLoad1;

      if (type === '1') {
        threeLoad1.camera.copy(threeLoad.camera);
      } else if (type === '2') {
        threeLoad.camera.copy(threeLoad1.camera);
      }
    },
    /**
     * 切换相机视角
     * 以下是两个模型的转换操作
     */
    switchView(type) {
      if (
        (this.viewType === '4' && type === '4') ||
        (this.viewType === '5' && type === '5') ||
        (this.viewType === '6' && type === '6')
      ) {
        return false;
      }
      let threeLoadRef = this.$refs.threeLoad;
      let threeLoadRef1 = this.$refs.threeLoad1;
      this.syncMode(threeLoadRef);
      this.syncMode(threeLoadRef1);
      this.viewType = type;
      if (threeLoadRef && threeLoadRef1) {
        this.controlMode(threeLoadRef, type);
        this.controlMode(threeLoadRef1, type);
      }
    },

    // 封装一个方法控制模型同步旋转
    syncMode(threeLoadRef) {
      let boundingBox = new THREE.Box3().setFromObject(threeLoadRef.group);
      let center = new THREE.Vector3();
      boundingBox.getCenter(center);
      threeLoadRef.group.position.sub(center);
      threeLoadRef.resetControls();
      if (this.viewType === '4') {
        threeLoadRef.group1.children.forEach((item) => {
          if (item.typeName.indexOf('upper') !== -1) {
            // 上颚
            item.rotateY(-23.5);
            item.position.set(item.position.x + 40, item.position.y, item.position.z - 24);
          } else {
            // 下颚
            item.rotateY(23.5);
            // item.rotateX(-0.1);
            item.position.set(item.position.x + 20, item.position.y, item.position.z + 25);
          }
        });
      } else if (this.viewType === '5') {
        threeLoadRef.group1.children.forEach((item) => {
          if (item.typeName.indexOf('upper') !== -1) {
            // 上颚
            item.rotateY(-23.5);
            item.position.set(item.position.x + 40, item.position.y, item.position.z - 24);
          } else {
            // 下颚
            item.rotateY(23.5);
            // item.rotateX(-0.1);
            item.position.set(item.position.x + 20, item.position.y, item.position.z + 25);
          }
        });
        threeLoadRef.group1.children.forEach((item) => {
          item.visible = false;
          if (item.typeName.indexOf('upper') !== -1) {
            item.visible = true;
            item.position.set(item.position.x - 40, item.position.y, item.position.z + 24);
          }
        });
      } else if (this.viewType === '6') {
        threeLoadRef.group1.children.forEach((item) => {
          if (item.typeName.indexOf('upper') !== -1) {
            // 上颚
            item.rotateY(-23.5);
            item.position.set(item.position.x + 40, item.position.y, item.position.z - 24);
          } else {
            // 下颚
            item.rotateY(23.5);
            // item.rotateX(-0.1);
            item.position.set(item.position.x + 20, item.position.y, item.position.z + 25);
          }
        });
        threeLoadRef.group1.children.forEach((item) => {
          item.visible = false;
          if (item.typeName.indexOf('upper') === -1) {
            item.visible = true;
            item.position.set(item.position.x - 40, item.position.y, item.position.z - 24);
          }
        });
      }
    },
    // 封装一个方法控制当前视角以及平铺等功能
    controlMode(threeLoadRef, type) {
      threeLoadRef.group.children.forEach((item) => {
        item.visible = true;
      });
      threeLoadRef.group1.children.forEach((item) => {
        item.visible = true;
      });
      if (type === '1') {
        threeLoadRef.group.visible = true;
        threeLoadRef.group1.visible = false;
        threeLoadRef.camera.position.set(0, 0, 200);
      } else if (type === '2') {
        threeLoadRef.group.visible = true;
        threeLoadRef.group1.visible = false;
        threeLoadRef.camera.position.set(0, 0, 200);
        threeLoadRef.group.children.forEach((item) => {
          item.visible = false;
          if (item.typeName.indexOf('upper') !== -1) {
            item.visible = true;
          }
        });
      } else if (type === '3') {
        threeLoadRef.group.visible = true;
        threeLoadRef.group1.visible = false;
        threeLoadRef.camera.position.set(0, 0, 200);
        threeLoadRef.group.children.forEach((item) => {
          item.visible = false;
          if (item.typeName.indexOf('upper') === -1) {
            item.visible = true;
          }
        });
      } else if (type === '4') {
        threeLoadRef.group.visible = false;
        threeLoadRef.group1.visible = true;
        threeLoadRef.modelTiling();
      } else if (type === '5') {
        threeLoadRef.group.visible = true;
        threeLoadRef.modelTiling();
        threeLoadRef.group1.children.forEach((item) => {
          item.visible = false;
          if (item.typeName.indexOf('upper') !== -1) {
            item.visible = true;
            item.position.set(item.position.x + 40, item.position.y, item.position.z - 24);
          }
        });
      } else if (type === '6') {
        threeLoadRef.group.visible = true;
        threeLoadRef.modelTiling();
        threeLoadRef.group1.children.forEach((item) => {
          item.visible = false;
          if (item.typeName.indexOf('upper') === -1) {
            item.visible = true;
            item.position.set(item.position.x + 40, item.position.y, item.position.z + 24);
          }
        });
      } else if (type === '7') {
        threeLoadRef.group.visible = true;
        threeLoadRef.group1.visible = false;
        threeLoadRef.camera.position.set(-200, 0, 0);
      } else if (type === '8') {
        threeLoadRef.group.visible = true;
        threeLoadRef.group1.visible = false;
        threeLoadRef.camera.position.set(200, 0, 0);
      }
    },
    // 进行模型同步的操作
    synchronous() {},
    toResetting() {
      let threeLoadRef = this.$refs.threeLoad;

      threeLoadRef.group.children[0].updateMatrix();

      threeLoadRef.resetControls();
      this.switchView(this.viewType);
    },

    problemCarouselChange(carouselIndex, currObj) {
      currObj['currIndex'] = carouselIndex;
    },
    regenerateFile() {
      this.downloadLoading = true;
      this.$http({
        method: 'post',
        url: `dataConversion/coldDataToHotDataOralReport2Cloud?primaryId=${this.infoData.primaryId}`, //后端接口
      }).then(({ data: res }) => {
        this.dialogVisible = false;
        this.downloadLoading = false;
        if (res.code !== 0) {
          this.$message({
            message: this.$t('add.add071'),
            type: 'success',
          });
        } else {
        }
        this.getData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.OralReport_bg {
  background: #d7e1fe66;
  height: 100%;

  .OralReport {
    font-size: 15px;
    width: 100%;
    height: 100%;

    padding: 10px;
    overflow: auto;
    background: url('./../../assets/img/report_background.png') no-repeat;
    background-size: cover;

    ::v-deep .el-carousel__arrow {
      z-index: 999999 !important;
    }

    ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
      width: 7px;
      height: 7px;
      background: #003e67;
      border: 1px solid #003e67;
      border-radius: 50%;
      opacity: 0.3;
    }

    ::v-deep .el-carousel__arrow {
      width: 45px;
      height: 45px;

      i {
        font-size: 18px;
      }
    }

    .themeBg {
      background: rgb(60 97 195 / 50%) !important;
    }

    ::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
      width: 7px;
      height: 7px;
      background: #003e67;
      border-radius: 50%;
      opacity: 1;
    }

    //   统一的圆圈样式
    .round {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;

      margin-right: 5px;
    }

    .roundBg-1 {
      background: rgb(166, 166, 166);
    }

    .roundBg0 {
      background: rgb(232, 128, 204);
    }

    .roundBg1 {
      background: rgb(255, 168, 109);
    }

    .roundBg2 {
      background: rgb(159, 148, 243);
    }

    .roundBg3 {
      background: rgb(240, 111, 111);
    }

    .roundBg4 {
      background: rgb(98, 136, 253);
    }

    .roundBg5 {
      background: rgb(136, 213, 124);
    }

    .roundBg6 {
      background: rgb(242, 197, 124);
    }

    .roundBg7 {
      background: rgb(242, 205, 61);
    }

    .roundBg8 {
      background: rgb(83, 220, 168);
    }

    .roundBg9 {
      background: rgb(140, 208, 223);
    }

    .shallow0 {
      background: rgb(250, 230, 245);
    }

    .shallow1 {
      background: rgb(255, 233, 218);
    }

    .shallow2 {
      background: rgb(234, 231, 252);
    }

    .shallow3 {
      background: rgb(255, 230, 230);
    }

    .shallow4 {
      background: rgb(226, 233, 255);
    }

    .shallow5 {
      background: rgb(221, 248, 217);
    }

    .shallow6 {
      background: rgb(255, 244, 225);
    }

    .shallow7 {
      background: rgb(254, 246, 214);
    }

    .shallow8 {
      background: rgb(224, 253, 242);
    }

    .shallow9 {
      background: rgb(216, 239, 244);
    }

    // 统一的折叠样式
    .el-collapse {
      margin-top: 10px;
      border-radius: 10px;

      .collapse_title {
        span {
          display: inline-block;
        }

        > span:nth-child(1) {
          width: 35px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          color: #ffffff;
          margin-left: 10px;
          border-radius: 8px;
          margin-right: 10px;
        }

        > span:nth-child(2) {
          font-size: 16px;
          font-weight: bold;
        }
      }

      .problem_item {
        padding-left: 10px;

        span {
          display: inline-block;
          font-size: 15px;
        }

        .row2,
        .row3 {
          padding-left: 35px;

          > span:nth-child(1) {
            margin-right: 15px;
          }
        }

        .row1 {
          display: flex;
          align-items: center;
          height: 40px;
          margin-top: 10px;

          .numberBox {
            width: 35px;
            display: flex;

            .line {
              width: 3px;
              height: 25px;
              margin-right: 10px;
            }

            .number {
              margin-right: 10px;
            }
          }

          .problem_name {
            margin-right: 15px;
          }
        }

        .row3 {
          margin-bottom: 15px;
        }

        .toothBox {
          position: absolute;
          z-index: 999;
          width: 25%;

          .toothItem {
            display: inline-block;
            width: 40px;
            height: 40px;

            line-height: 40px;
            text-align: center;
            margin-left: 15px;
            margin-top: 15px;
            border-radius: 10px;
            color: #ffffff;
            cursor: pointer;
          }
        }

        .el-carousel {
          .el-carousel__item {
            // min-width: 1000px;
            // min-height: 600px;
          }

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .problem_item_pc {
        ::v-deep .el-carousel__container {
          min-width: 1000px;
          min-height: 600px;
        }
      }
    }

    ::v-deep .el-collapse-item__header {
      background: transparent;
    }

    // 统一的边框样式
    .bd {
      border: 1px solid #3c61c3;
      border-radius: 10px;
    }

    .OralReport_content {
      padding: 10px;
      width: 85%;
      margin: 0 auto;

      border-radius: 10px;
      background: rgb(255 255 255 / 30%);

      .OralReport_title {
        color: #3c61c3;
        font-size: 40px;

        text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
        padding-top: 10px;
      }

      .OralReport_info,
      .OralReport_model,
      .OralReport_model_box,
      .OralReport_screenshot,
      .OralReport_problem,
      .OralReport_screenshot_box,
      .OralReport_problem_box {
        margin-top: 15px;
      }

      .OralReport_info {
        padding: 10px;

        .el-col {
          padding: 7px;
        }

        .title_text {
          display: inline-block;
          margin-right: 20px;
        }
      }

      .OralReport_model {
        .OralReport_model_box {
          position: relative;
          height: 500px;
          border-radius: 10px;

          .btn_box {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(0, -50%);
            display: flex;
            flex-direction: column;
            z-index: 999;

            img {
              background: #ffffff;
              border-radius: 10px;
              display: inline-block;
              margin-bottom: 10px;
              cursor: pointer;
            }
          }

          .model_box {
            width: 100%;
            height: 100%;
            position: relative;
            // top: 0.11%;
            // left: 0.11%;
            border-radius: 10px;
            > div {
              display: flex;
              align-items: center;
              height: 100%;
            }
            .resetting_box {
              display: inline-block;
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background: #ffffff;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              position: absolute;
              bottom: 5%;
              left: 50%;
              transform: translate(-50%, 0);
              cursor: pointer;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .resetting_box_pc:hover {
              background: rgba(60, 97, 195, 0.5) !important;
            }
          }
        }
      }

      .OralReport_screenshot {
        .OralReport_screenshot_box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 15px;
          background: rgb(255 255 255 / 90%);

          .OralReport_screenshot_box_top {
            // min-height: 600px;
            height: 600px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .screenshot_box {
              width: 38%;

              > img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }

            .carousel_box {
              width: 60%;

              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
              h3 {
                text-align: center;
                margin: 30px 0 10px 0;
              }
              .pic_box {
                display: flex;
                justify-content: space-evenly;
                > div {
                  width: 22%;
                  height: 220px;
                  background: #f6fbfe;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
              img {
                display: inline-block;
                width: 90%;
                height: 90%;
                object-fit: contain;
              }
            }
          }

          .OralReport_screenshot_box_bottom {
            min-height: 50px;
            margin-top: 15px;
            // height: 15%;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            > div {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              cursor: pointer;
              margin-bottom: 10px;
            }
          }
        }
      }

      .OralReport_problem_box {
        padding: 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.9);
        video {
          width: 100%;
          height: 450px;
        }
      }

      .OralReport_subtitle {
        font-size: 17px;
        font-weight: bolder;
      }
      .divider {
        height: 70%;
        width: 1px;
        background: #dae3fe;
      }
    }
  }
}
</style>
